<script setup>
import { ref } from 'vue';

const fileTreeSelected = ref('');
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Tree Component</h1>

    <section class="my-8">
      <h2 class="mb-4 text-2xl font-bold">Tree</h2>
      <div class="grid grid-cols-1 gap-4">
        <div class="rounded-md border p-4">
          <h3 class="mb-2 font-medium">File Explorer Example</h3>
          <div class="space-y-2">
            <Tree @change="(e) => console.debug('Tree changed', e)">
              <TreeItem expanded>
                <span>📁 Project</span>
                <TreeItem>
                  <span>📁 src</span>
                  <TreeItem>
                    <span>📁 components</span>
                    <TreeItem @click="fileTreeSelected = 'Tree.vue'">
                      <span>📄 Tree.vue</span>
                    </TreeItem>
                    <TreeItem @click="fileTreeSelected = 'TreeItem.vue'">
                      <span>📄 TreeItem.vue</span>
                    </TreeItem>
                  </TreeItem>
                  <TreeItem>
                    <span>📁 views</span>
                    <TreeItem
                      @click="fileTreeSelected = 'ui_gallery_public.vue'"
                    >
                      <span>📄 ui_gallery_public.vue</span>
                    </TreeItem>
                  </TreeItem>
                </TreeItem>
                <TreeItem>
                  <span>📁 public</span>
                  <TreeItem @click="fileTreeSelected = 'index.html'">
                    <span>📄 index.html</span>
                  </TreeItem>
                </TreeItem>
                <TreeItem @click="fileTreeSelected = 'package.json'">
                  <span>📄 package.json</span>
                </TreeItem>
                <TreeItem @click="fileTreeSelected = 'README.md'">
                  <span>📄 README.md</span>
                </TreeItem>
              </TreeItem>
            </Tree>

            <div
              v-if="fileTreeSelected"
              class="mt-4 rounded-md bg-gray-100 p-2"
            >
              Selected file: {{ fileTreeSelected }}
            </div>
          </div>
        </div>

        <div class="rounded-md border p-4">
          <h3 class="mb-2 font-medium">Different Tree Appearances</h3>
          <div class="space-y-4">
            <div>
              <h4 class="mb-1 font-medium">Subtle (Default)</h4>
              <Tree appearance="subtle" size="medium">
                <TreeItem expanded>
                  <span>Root Item</span>
                  <TreeItem>
                    <span>Child Item 1</span>
                  </TreeItem>
                  <TreeItem selected>
                    <span>Child Item 2 (Selected)</span>
                  </TreeItem>
                </TreeItem>
              </Tree>
            </div>

            <div>
              <h4 class="mb-1 font-medium">Subtle Alpha</h4>
              <Tree appearance="subtle-alpha" size="medium">
                <TreeItem expanded>
                  <span>Root Item</span>
                  <TreeItem>
                    <span>Child Item 1</span>
                  </TreeItem>
                  <TreeItem selected>
                    <span>Child Item 2 (Selected)</span>
                  </TreeItem>
                </TreeItem>
              </Tree>
            </div>

            <div>
              <h4 class="mb-1 font-medium">Transparent</h4>
              <Tree appearance="transparent" size="medium">
                <TreeItem expanded>
                  <span>Root Item</span>
                  <TreeItem>
                    <span>Child Item 1</span>
                  </TreeItem>
                  <TreeItem selected>
                    <span>Child Item 2 (Selected)</span>
                  </TreeItem>
                </TreeItem>
              </Tree>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
